<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/demo/tit2.jpg">
<link rel="icon" type="image/png" href="assets/img/demo/tit2.jpg">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>物理量纲</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>
    
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet">
    
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    
<!-- Main CSS -->
<link href="./assets/css/main.css" rel="stylesheet"/>
    
<!-- Animation CSS -->
<link href="./assets/css/vendor/aos.css" rel="stylesheet"/>

<style type="text/css">
	#font{
		font-size: large;
	}
</style>
    
</head>
    
<body> 
    
<!----------------------------------------------------------------------
NAVBAR (remove topnav if you don't want changed nav background on scroll)
------------------------------------------------------------------------>
<nav class="topnav navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<div class="container-fluid">
	<a class="navbar-brand" href="./index.html"><i class="fas fa-anchor mr-2"></i><strong>Anchor YRC</strong></a>
	<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="navbar-collapse collapse" id="navbarColor02" style="">
		<ul class="navbar-nav mr-auto d-flex align-items-center">
			<li class="nav-item">
				<a class="nav-link" href="#fabupinglun">发布评论</a>
			</li>
			
			<li class="nav-item">
				<a class="nav-link" href="#chakanpinglun">查看评论</a>
			</li>
		</ul>
		<ul class="navbar-nav ml-auto d-flex align-items-center">
			<li class="nav-item">
			<span class="nav-link" href="#">
				<a class="btn btn-info btn-round shadow-sm" href="#" data-toggle="modal" data-target="#exampleModalCenter6"><i class="fas fa-cloud-download-alt"></i> 建议反馈 <a href="#" class="" class="hidden"></a>
				</a> 	
			<!-- <a class="btn btn-info btn-round shadow-sm" href="#" data-toggle="modal" data-target="#modal_newsletter"><i class="fas fa-cloud-download-alt"></i> 下载源码 <a href="#" class="" class="hidden"></a>
			</a> -->
			</span>
			</li>
		</ul>
	</div>
</div>
</nav>
<!-- End Navbar -->
    
    
<!-------------------------------------
HEADER
--------------------------------------->
<header>
    <div class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-3 bg-primary position-relative">
        <div class="container-fluid text-white h-100">
            <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5">
                <div class="col pt-4 pb-4">
                    <h1 class="display-3"><strong>Help and Talk</strong></h1>
                    <h5 class="font-weight-light mb-4">作者：192088206杨润成<strong> </strong>  </h5>
                    <a href="index.html" class="btn btn-lg btn-outline-white btn-round">Back Index</a>
                </div>
                <!-- <div class="col align-self-bottom align-items-right text-right h-max-380 h-xl-560 position-relative z-index-1">
                    <img src="assets/img/demo/tit2.jpg" class="rounded img-fluid">
                </div> -->
            </div>
        </div>
    </div>
    <svg style="-webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg); margin-top: -1px;" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
    <path class="bg-primary" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"/>
    </svg>
</header>
<!--- END HEADER -->

<!-- Main -->
<div class="container pt-5 pb-5" data-aos="fade-up">
	<div class="row justify-content-center">
		<div class="col-md-8">
			<div class="form-group">
				<h3 id="fabupinglun" for="exampleFormControlTextarea1">请输入你的评论:</h3>
			    
			    <textarea id="wenben" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
			</div>
			<button id="fabu" type="button" class="btn btn-primary btn-lg btn-block">发布评论</button>
			<div id="font" class="pt-5 pb-5">
				<h3 id="chakanpinglun">评论区:</h3>
				<ul id="liebiao">
					<li>这是一个换算物理单位的网站</li>
					<button type="button" class="btn btn-block btn-dark btn-sm" data-toggle="tooltip" data-placement="right" title="对不起，你没有删除该评论的权限">
					  删除
					</button>
					<li>可以从网站中获取物理新闻的物理知识</li>
					<button type="button" class="btn btn-block btn-dark btn-sm" data-toggle="tooltip" data-placement="right" title="对不起，你没有删除该评论的权限">
					  删除
					</button>
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- End Main -->
    
  
<!-- Modal 下载 -->
<div class="modal fade" id="exampleModalCenter6" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle">建议或反馈</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<form class="was-validated">
				  <div class="mb-3">
				    <label for="validationTextarea" class="form-label">内容详情：</label>
				    <textarea class="form-control" id="validationTextarea" placeholder="此处填写内容" required></textarea>
				    <div class="invalid-feedback">
				      内容不能为空
				    </div>
				  </div>
					<label class="form-label">内容分类：</label>
					<div class="form-check">
					  <input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required>
					  <label class="form-check-label" for="validationFormCheck2">提出建议</label>
					</div>
					<div class="form-check mb-3">
					  <input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
					  <label class="form-check-label" for="validationFormCheck3">问题反馈</label>
					  <div class="invalid-feedback">请勾选分类</div>
					</div>
				
					<div class="">
					      <label for="validationServerUsername">你的名字：</label>
					      <div class="input-group">
					        <div class="input-group-prepend">
					          <span class="input-group-text" id="inputGroupPrepend3">@</span>
					        </div>
					        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" value="默认" required>
					      
					      </div>
					    </div>
					<br><br>
				  <div class="form-check mb-3">
				    <input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
				    <label class="form-check-label" for="validationFormCheck1">我承诺所输入的内容真实且可靠</label>
				    <div class="invalid-feedback">此选项必须勾选</div>
				  </div>
				
				  <div class="">
				    <button class="btn btn-primary btn-block" type="submit">提交</button>
				  </div>
				</form>
			</div>
		
		</div>
	</div>
</div>
<!--------------------------------------
END DEMO MODAL & DONATE BUTTON
--------------------------------------->

    
<!--------------------------------------
FOOTER
--------------------------------------->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
<path class="bg-black" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"/>
</svg>
<footer class="bg-black pb-5">
<div class="container">
	<div class="row">
		<div class="col-12 col-md mr-4">
			<i class="fas fa-copyright text-white"></i>
			<small class="d-block mt-3 text-muted">©
			<script>document.write(new Date().getFullYear())</script>
			Anchor RunCheng Yang,  by Yrc <a target="_blank" href="#">@Gitee</a>. License MIT.
			</small>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-white">Features</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Cool stuff</a></li>
				<li><a class="text-muted" href="#">Random feature</a></li>
				<li><a class="text-muted" href="#">Team feature</a></li>
				<li><a class="text-muted" href="#">Stuff for developers</a></li>
			</ul>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-white">Resources</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Resource</a></li>
				<li><a class="text-muted" href="#">Resource name</a></li>
				<li><a class="text-muted" href="#">Another resource</a></li>
				<li><a class="text-muted" href="#">Final resource</a></li>
			</ul>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-white">Utilities</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Business</a></li>
				<li><a class="text-muted" href="#">Education</a></li>
				<li><a class="text-muted" href="#">Government</a></li>
				<li><a class="text-muted" href="#">Gaming</a></li>
			</ul>
		</div>
		<div class="col-6 col-md">
			<h5 class="mb-4 text-white">About</h5>
			<ul class="list-unstyled text-small">
				<li><a class="text-muted" href="#">Team</a></li>
				<li><a class="text-muted" href="#">Locations</a></li>
				<li><a class="text-muted" href="#">Privacy</a></li>
				<li><a class="text-muted" href="#">Terms</a></li>
			</ul>
		</div>
	</div>
</div>
</footer> 
    
<!--------------------------------------
JAVASCRIPTS
--------------------------------------->    
<script src="./assets/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="./assets/js/vendor/popper.min.js" type="text/javascript"></script>
<script src="./assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
<script src="./assets/js/vendor/share.js" type="text/javascript"></script>
<script src="./assets/js/functions.js" type="text/javascript"></script>
    
<script>
	//1、获取元素
	var txt = document.getElementById("wenben");
	var btn = document.getElementById("fabu");
	var ul = document.getElementById("liebiao");
	//2、给button绑定点击事件
	/* li.innerHTML = txt.value +
	 "<div class='d-grid gap-2 d-md-flex justify-content-md-end'>" + 
	 "<a class='btn btn-danger btn-sm justify-content-md-end' href='javascript:;'>删除</a>" + 
	 "</div>" */
	btn.onclick = function () {
		if (txt.value == "") {//当文本框中没有文字时，提示
			alert("您没有输入内容")
		} else {
			//创建元素li作为留言区
			var li = document.createElement("li");
			//将文本框中的内容放到li中,a标签中href中的内容代表什么都不执行
			li.innerHTML = txt.value + "<br><a class='btn btn-danger btn-block btn-sm' href='javascript:;'>删除</a>"
			txt.value = "";//添加之后文本框的内容清空
			//将留言添加到ul中，而且在最上方
			ul.insertBefore(li, ul.children[0]);
			//当点击删除时删除ul中的li
			var as = document.querySelectorAll("a");
			//循环给每个删除绑定事件
			for (var i = 0; i < as.length; i++) {
				as[i].onclick = function () {
					//删除当前a标签所在位置的父节点li
					ul.removeChild(this.parentNode);
				}
			}
		}
	}
</script>

<!-- Animation -->
<script src="./assets/js/vendor/aos.js" type="text/javascript"></script>
<noscript>
    <style>
        *[data-aos] {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    </style>
</noscript>
<script>
    AOS.init({
        duration: 700
    });
</script>
 
<!-- Disable animation on less than 1200px, change value if you like -->
<script>
AOS.init({
  disable: function () {
    var maxWidth = 1200;
    return window.innerWidth < maxWidth;
  }
});
</script>
    
<!-- Carousel Height Smooth -->
<script>    
    $('.carousel').on('slide.bs.carousel', function (event) {
      var height = $(event.relatedTarget).height();
      var $innerCarousel = $(event.target).find('.carousel-inner');
      $innerCarousel.animate({
        height: height
      });
    });
    </script>
    
<!-- Popovers -->
<script>
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
    $('.popover-dismiss').popover({
      trigger: 'focus'
    })
    </script>
    
<!-- Tooltips -->
<script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
</script>
    
</body>
</html>